<template>
  <div v-loading="suggestLoading" class="pt-2 pl-2 pr-3">
    <div v-for="order in listState.suggestInfo.order" :key="order">
      <div class="text-xs pb-2 pt-2">{{ showTitle(order) }}</div>
      <!-- 歌曲 -->
      <template v-if="order === 'songs'">
        <div v-for="(item, index) in listState.suggestInfo.songs" :key="index">
          <div class="item cursor-pointer" @click="toggleName(item)">
            <span>
              <span class="base-text-hover-color">{{ item.name }} </span>&nbsp;-&nbsp; {{ item.artists[0].name }}
            </span>
          </div>
        </div>
      </template>
      <!-- 歌手 -->
      <template v-if="order === 'artists'">
        <div v-for="(item, index) in listState.suggestInfo.artists" :key="index">
          <div class="item cursor-pointer">
            <el-avatar size="small" :src="item.img1v1Url"></el-avatar>
            <span class="ml-2 base-text-hover-color"> {{ item.name }}</span>
          </div>
        </div>
      </template>
      <!-- 专辑 -->
      <template v-if="order === 'albums'">
        <div v-for="(item, index) in listState.suggestInfo.albums" :key="index">
          <div class="item cursor-pointer">
            <span class="ml-2">
              <span class="base-text-hover-color"> {{ item.name }}</span>
              &nbsp;-&nbsp;{{ item.artist.name }}
            </span>
          </div>
        </div>
      </template>
      <!-- 歌单 -->
      <template v-if="order === 'playlists'">
        <div v-for="(item, index) in listState.suggestInfo.playlists" :key="index">
          <div class="item cursor-pointer">
            <el-avatar size="small" :src="item.coverImgUrl"></el-avatar>
            <span class="ml-2 base-text-hover-color"> {{ item.name }}</span>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import { useSearchStore } from '@/stores/search'
import type { Song } from '@/types/song/index'
const { suggestLoading, listState } = toRefs(useSearchStore())
import { usePlayerStore } from '@/stores/player'
const { setId } = toRefs(usePlayerStore())

const showSinger = computed(() => (row: Song) => {
  return row.artists.reduce((prev, cur) => `${prev}${prev ? '/' : ''}${cur.name}`, '')
})
const showTitle = (name: string) => {
  switch (name) {
    case 'songs':
      return '单曲'
    case 'albums':
      return '专辑'
    case 'artists':
      return '歌手'
    case 'playlists':
      return '歌单'
    default:
      return name
  }
}

const toggleName = (value: Song) => {
  setId.value(value.id)
}
</script>

<style lang="less" scoped>
.item {
  @apply flex items-center rounded text-xs hover:bg-slate-200 pt-2 pb-2 pl-1;
}
</style>
